import { Module } from "vuex";

interface Theme {
	theme: {
		nav: {
			color: string;
			textColor: string;
		};
		countDown: {
			color: string;
		};
		progress: {
			color: string;
		};
	};
}

const generateTheme = {
	pure(color: string, textColor: string = 'white'): Theme['theme'] {
		return {
			nav: {
				color,
				textColor
			},
			countDown: {
				color
			},
			progress: {
				color
			}
		}
	}
}
const themes: Theme["theme"][] = [
	{
		nav: {
			color: "#0099CC",
			textColor: 'white'
		},
		countDown: {
			color: "#C4E1FF"
		},
		progress: {
			color: ""
		}
	},
	generateTheme.pure('orange'),
	generateTheme.pure('#FFD2D2', 'black'),
	generateTheme.pure('#99CCCC', '#666666')
];
const theme: Module<Theme, {}> = {
	namespaced: true,
	state: {
		theme: { ...themes[0] }
	},
	mutations: {
		SET_THEME(state, id: number) {
			state.theme = themes[id];
		}
	}
};

export default theme;
